<script setup lang="ts">
import type { MobilePhoneLogin } from '@/common/types/user-type'
import type { UnwrapRef } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import {
  getVerificationCodeMobile,
  getMobilePhoneLogin,
} from '@/common/service/user-service'
import { useUserStore } from '@/common/stores/modules/users-store'

const userStore = useUserStore()
const router = useRouter()
// 获取验证码倒计时
const { countdown, isCounting, startCountdown, resetCountdown } =
  useCountdown(60)
const labelCol = { span: 24 }
const wrapperCol = { span: 24 }
const labelCol1 = { span: 8 }
const wrapperCol1 = { span: 16 }
const formRef = ref()
const size = ref(24) // 其他登录图标大小
const formcontent = ref()

// 使用 defineEmits 定义事件
const emit = defineEmits<{
  (event: 'wechatlogin', value: boolean): void
}>()

// 点击 "其他方式" 时，触发父组件事件
const otherlogins = () => {
  emit('wechatlogin', true)
}

// 初始数据
const formState: UnwrapRef<MobilePhoneLogin> = reactive({
  phoneNumber: '', // 手机号码
  code: '', // 验证码
  remember: [], // 用户协议
})

// 校验规则
const rules = reactive(getRules(formState))

// 获取手机号验证码
const handleGetCode = async () => {
  try {
    // 调用接口，传递手机号码
    const res = await getVerificationCodeMobile(formState.phoneNumber)
    console.log(res, '请求头')
    message.success('验证码已发送!')
    // 如果请求成功，则开始倒计时
    startCountdown()
  } catch (error) {
    message.error('获取验证码失败，请稍后重试')
    console.error('接口调用错误:', error)
  }
}

// 登录
const onSubmit = async () => {
  try {
    // // 表单验证
    await formRef.value.validate()
    // // 校验手机号登录接口，进行校验
    // const response = await getMobilePhoneLogin(
    //   formState.phoneNumber,
    //   formState.code,
    // )

    userStore.setUserInfo({
      user: formState.phoneNumber,
      code: formState.code,
      // 这里如果还有其他需要保存的字段也一并添加进来
    });


    console.log(formState,'数据')

    // const token =  response.data._rawValue.data

    // // 验证码校验正确，执行登录逻辑
    formcontent.value = userStore.userInfo

    // // 储存数据
    message.success('登录成功')

    //   跳转到首页
    router.push('/')
  } catch (error) {
    // 捕获异常并提供用户友好的错误信息
    console.error('登录失败:', error)
    message.error('登录失败，请重试')
  }
}
</script>

<template>
  <a-form
    class="login-name"
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="labelCol1"
    :wrapper-col="wrapperCol1"
  >
    <a-form-item
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      label="手机号"
      ref="phoneNumber"
      name="phoneNumber"
    >
      <a-input
        class="login-name-input"
        placeholder="请输入手机号码"
        v-model:value="formState.phoneNumber"
      />
    </a-form-item>

    <!-- 验证码 -->
    <a-form-item
      label="验证码"
      ref="code"
      name="code"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-input-search v-model:value="formState.code" placeholder="验证码">
        <template #enterButton>
          <a-button @click="handleGetCode">
            {{ isCounting ? `${countdown}秒后重试` : '获取验证码' }}</a-button
          >
        </template>
      </a-input-search>
    </a-form-item>

    <!-- 隐私协议 -->
    <a-form-item
      class="login-name-agreement"
      ref="remember"
      name="remember"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-checkbox-group v-model:value="formState.remember">
        <a-checkbox class="login-name-agreement-text">
          勾选即代表你同意并接受
          <span class="login-name-agreement-text-span"
            >服务协议·隐私政策《SparkDesk隐私政策》·《SparkDesk用户协议》</span
          >
        </a-checkbox>
      </a-checkbox-group>
    </a-form-item>

    <!-- 登录 -->
    <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-button class="login-name-button" type="primary" @click="onSubmit"
        >登录</a-button
      >
    </a-form-item>

    <!-- 其他方式 -->
    <a-form-item class="login-name-register">
      <div class="login-name-register-container">
        <div>其他方式：</div>
        <a-avatar-group @click="otherlogins" class="login-name-other">
          <a-avatar
            :size="size"
            class="login-name-other-icon"
            src="/public/weixin.svg"
          />
          <a-avatar
            :size="size"
            class="login-name-other-icon"
            src="/public/weixin.svg"
          />
          <a-avatar
            :size="size"
            class="login-name-other-icon"
            src="/public/weixin.svg"
          />
          <a-avatar
            :size="size"
            class="login-name-other-icon"
            src="/public/weixin.svg"
          />
        </a-avatar-group>
      </div>
    </a-form-item>
  </a-form>
</template>

<style lang="scss" scoped>
.login-name-agreement-text {
  font-size: 12px;
  color: $educ-color-white;

  &-span {
    color: #14f417;
  }
}

.login-name-button {
  width: 100%;
}

.login-name-register {
  color: $educ-color-white;
  cursor: pointer;
}

.login-name-register-container {
  display: flex;

  .login-name-other {
    &-icon {
      cursor: pointer;
      background-color: $educ-color-white;
    }
  }
}

// 输入框内边距
:deep .ant-input {
  padding: 6px;
}
</style>
